<html>
    <meta charset="UTF-8">

    <input id="personId" type="text" name="username" value="tom">

    <button onclick="eat()">点击我吃饭</button>
    <button onclick="changeMyName()">改变姓名</button>
    <button onclick="changeImg()">切换图片</button>
    <button onclick="changeImgPlace(true)">右移动图片</button>
    <button onclick="changeImgPlace(false)">左移动图片</button>
    <button onclick="showOrhidden()">隐藏显示图片</button>
    <button onclick="stopShow()">停止闪烁图片</button>

    <div id="imgDiv">
        <img id="hanhanId" style="margin-left:90px; width: 200px; height: 300px" src="/img/hanhan.jpeg">
    </div>

    <script>
        var username = "tom";
        var price = 9.9;
        var flag = false;
        var showImg = true;

        username = "jack";
        //alert是内置的函数或者是方法
        // alert("hello world");
        // alert(username);

        function eat() {
            alert('吃了吗？' + username)
        }

        function changeMyName() {
            alert("change name");
            var personInput = document.getElementById("personId");
            alert(personInput.value);//对输入框进行读操作
            personInput.value = 'tom777';//对输入框进行写操作
        }
        
        function changeImg() {
            var hanhanImg = document.getElementById("hanhanId");
            if (flag) {
                hanhanImg.src = '/img/gsl2.jpg';
            } else {
                hanhanImg.src = '/img/hanhan.jpeg';
            }

            flag = !flag;
        }

        function showOrhidden() {
            var imgDivEle = document.getElementById("imgDiv");

            imgDivEle.style.display = showImg ? 'block' : 'none';

            showImg = !showImg;
        }

        //延迟执行方法
        // setTimeout(function () {
        //     alert('666');
        // }, 5000);
        //

        //每隔一秒钟执行一次方法
        var imgInterval = setInterval(showOrhidden, 1000);

        function stopShow() {
            clearInterval(imgInterval);
        }

        var imgBegin = 30;
        function changeImgPlace(flag) {
            var hanhanImg = document.getElementById("hanhanId");
            if (flag) {
                imgBegin += 30;
            } else {
                imgBegin -= 30;
            }
            hanhanImg.setAttribute("style", 'margin-left:' + imgBegin + 'px; width: 200px; height: 300px');
        }

        //调用函数
        // eat()

        var dog = {
            "name" : "wc007",
            "price" : 99,
            eat : function () {
                alert("dog eat");
            },
            move : function () {
                alert("dog move");
            }
        }

        // alert(dog.name);
        // dog.eat();
        // dog.move();

        dog.color = "yellow";

        // alert(dog.color);

        dog.wangwang = function () {
            alert('wangwang');
        }

        // dog.wangwang();

        if (dog.name == 'wc007') {
            // dog.wangwang();
        } else {
            alert('else');
        }

        console.log(">>>>>Hello world")


    </script>
</html>